<template>
    <div class="tab-container flex items-center gap-16px w-full" :style="{background: background}">
        <div v-for="(i, index) in tabs" class="tab-item" :style="{borderColor: background}" :key="index" :class="{'active': cur === i.id}" @click="handleTabClick(i)">
            {{ i.name }}
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
    active: {
        type: [String, Number]
    },
    tabs: {
        type: Array
    },
    background: {
        type: String,
        default: '#ffffff'
    }
})

const emits = defineEmits(['update:active', 'change'])

const cur = ref('')
watch(() => props.active, (newval) => {
    cur.value = newval
}, { immediate: true})

const handleTabClick = (item) => {
    cur.value = item.id
    emits('update:active', cur.value)
    emits('change', cur.value)
}

</script>
<style lang="scss" scoped>
.tab-container {
    padding: 0 20px;
    box-sizing: border-box;
}
.gap-16px {
    gap: 20px;
}
.tab-item {
    border-bottom: 2px solid #fff;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}
.active {
    border-bottom: 2px solid $primary !important;
    color: $primary;
}
</style>